<template>
<div id="map"></div>
</template>

<script>
import 'ol/ol.css'
import {Map, View} from "ol";
import TileLayer from "ol/layer/Tile";
import {OSM} from "ol/source";
import {defaults as defaultControls, OverviewMap, FullScreen, ScaleLine, ZoomSlider, MousePosition, ZoomToExtent} from 'ol/control';

export default {
  name: "controls",
  mounted() {
    const overviewMapControl = new OverviewMap({
      className: 'ol-overviewmap ol-custom-overviewmap', //鹰眼控件样式,
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      collapseLabel: "\u00BB",//鹰眼展开时功能按钮上的标识
      label: '\u00AB',//鹰眼折叠时功能按钮上的标识
      collapsed: false //初始为展开显示方式
    });
    new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:4326",    //使用这个坐标系
        center: [104.704968,31.540962],  //西南科技大学
        zoom: 15
      }),
      controls: defaultControls({attribution: false, zoom: true}).extend([
        overviewMapControl,//鹰眼控件
        new FullScreen(),//地图全屏控件
        new ScaleLine({
          units: 'metric',
          bar: false,
          minWidth: 70,
          maxWidth: 150
        }),//比例尺控件
        new ZoomSlider(), //滑块缩放控件
        new MousePosition(), //鼠标位置控件
        new ZoomToExtent({
          extent: [
            813079.7791264898, 5929220.284081122,
            848966.9639063801, 5936863.986909639
          ]
        })
      ])
    })
  }
  /**
   *
   //缩放到所有视图
   zoomToAllView() {
      this.map.setView(
        new View({
          projection: "EPSG:4326",
          center: [104.29806, 30.5263],
          zoom: 18,
        })
      );
    },
   //放大视图
   upZoom() {
      let zoom = this.map.getView().getZoom();
      this.map.getView().setZoom(++zoom);
    },
   //缩小视图
   downZoom() {
      let zoom = this.map.getView().getZoom();
      this.map.getView().setZoom(--zoom);
    },
   */
}
</script>

<style scoped lang="less">
#map {
  width: 1000px;
  height: 1000px;
  background-color: rgb(121, 119, 119);
  display: flex;
  // 鹰眼控件相对视图的位置
  .ol-custom-overviewmap, .ol-custom-overviewmap.ol-uncollapsible{
    top: auto;
    right: auto;
    // right: 0; /*右侧显示*/
    // bottom: 0; /*底部显示*/
    // margin-bottom: 10px;
    // margin-left: 10px;
  }
  /* 鹰眼控件展开时控件外框的样式 */
  .ol-custom-overviewmap:not(.ol-collapsed) {
    border: 1px solid black;
  }

  /* 鹰眼控件中地图容器的样式 */
  .ol-custom-overviewmap .ol-overviewmap-map {
    border: none;
    width: 150px; //控件的宽度
  }

  /* 在鹰眼控件中显示当前窗口中主图区域的边框 */
  // .ol-custom-overviewmap .ol-overviewmap-box {
  //     border: 2px solid red;
  // }

  /* 在鹰眼控件张开时其控件按钮图标的样式 */
  .ol-custom-overviewmap:not(.ol-collapsed) button {
    top: auto;
    right: auto;
    //right: 1px;
    bottom: 1px;
  }

  //比例尺控件位置
  .ol-scale-line {
    right:10px;
    left: auto;
    bottom: 10px;
    top: auto;
  }

  //鼠标控件位置
  .ol-mouse-position{
    width: 350px;
    bottom: 10px;
    top: auto;
    right: 150px;
    left: auto;
  }

  //全屏控件
  .ol-full-screen{
    top: 10px;
    right: 10px;
    left: auto;
    bottom: auto;
  }

  //缩放控件位置
  .ol-zoom{
    // top: 50px;
    top: 37px;
    right: 10px;
    left: auto;
    bottom: auto;
    .ol-zoom-out {
      margin-top: 3px;
    }
  }
}
</style>